import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import World from "@/components/World.vue";
import Worla from "@/components/Worla.vue";
import Worls from "@/components/Worls.vue";
import Worlf from "@/components/Worlf.vue";
import Worlg from "@/components/Worlg.vue";
import Worlh from "@/components/Worlh.vue";
import Worlj from "@/components/Worlj.vue";
import Worlk from "@/components/Worlk.vue";
import Worll from "@/components/Worll.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    redirect:'/Worla',
    children: [
      { path: '/Worla', component: Worla },
      { path: '/Worls', component: Worls },
      { path: '/World', component: World },
      { path: '/Worlf', component: Worlf },
      { path: '/Worlg', component: Worlg },
      { path: '/Worlh', component: Worlh },
      { path: '/Worlj', component: Worlj },
      { path: '/Worlk', component: Worlk },
      { path: '/Worll', component: Worll },
      
    ]
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
